<template>
    <van-nav-bar class="navBar" title="修改个人信息" left-text="返回" left-arrow @click-left="$router.back()" />
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field v-model="name" name="真实姓名" label="真实姓名" placeholder="真实姓名"
                :rules="[{ required: true, message: '请填写真实姓名' }]" />
            <!-- 设置性别 -->
            <van-field name="radio" label="单选框">
                <template #input>
                    <van-radio-group v-model="gender" direction="horizontal">
                        <van-radio name="男">男</van-radio>
                        <van-radio name="女">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <!-- 设置爱好 -->
            <van-field name="checkboxGroup" label="爱好">
                <template #input>
                    <van-checkbox-group v-model="hobby" direction="horizontal">
                        <van-checkbox name="睡觉" shape="square">睡觉</van-checkbox>
                        <van-checkbox name="吃饭" shape="square">吃饭</van-checkbox>
                        <van-checkbox name="学习" shape="square">学习</van-checkbox>
                    </van-checkbox-group>
                </template>
            </van-field>
            <!-- 设置生日 -->
            <!-- <van-cell title="选择单个日期" :value="birthday" @click="show = true" />
            <van-calendar :modelValue="birthday.split('/') "  :show="show" @confirm="onGetDate" /> -->

            <van-field v-model="birthday" is-link readonly name="birthday" label="生日" placeholder="点击选择出生日期"
                @click="show = true" />

            <van-popup :modelValue="birthday.split('/').slice(0, 3)" :show="show" position="bottom">
                <van-date-picker @confirm="onGetDate" @cancel="show = false" />
            </van-popup>


            <!-- 选择城市 -->
            <van-field v-model="city" is-link readonly label="城市" placeholder="选择城市" @click="showPicker = true" />
            <van-popup v-model:show="showPicker" round position="bottom">
                <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onGetCity" />
            </van-popup>


             <!-- 选择部落 -->
             <van-field v-model="qu" is-link readonly label="选择大区" placeholder="选择大区" @click="showPickerqu = true" />
            <van-popup v-model:show="showPickerqu" round position="bottom">
                <van-picker :columns="columns2" @cancel="showPickerqu = false" @confirm="onGetQu" />
            </van-popup>


            <!-- 头像上传 -->
            <van-field name="uploader" label="文件上传">
                <!-- 头像使用的是上传组件放在插槽中实现的 -->
                <template #input>
                    <!-- 绑定一个after-read用来读取文件 -->
                    <van-uploader v-model="headUrl" :max-count="1" :after-read="afterRead" />
                </template>
            </van-field>


            <!-- 自我评价 -->
            <van-field name="rate" label="自我评价">
                <template #input>
                    <van-rate v-model="score" />
                </template>
            </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
            {{ $store.state.personal.id }}
        </div>
    </van-form>
</template>
  
<script>
import axios from 'axios';
import { showDialog } from 'vant'; // 引入弹窗的方法
export default {
    data() {
        const personal = this.$store.state.personal;
        return {
            name: personal.name, // 初始值
            headUrl: personal.head ? [{ url: personal.head }] : [],
            show: false,
            birthday: personal.birthday,
            gender: personal.gender || '未设置',
            hobby: personal.hobby || [],
            columns: [
                { text: '杭州', value: 'Hangzhou' },
                { text: '宁波', value: 'Ningbo' },
                { text: '温州', value: 'Wenzhou' },
                { text: '绍兴', value: 'Shaoxing' },
                { text: '湖州', value: 'Huzhou' },
            ],
            showPicker: false,
            city: personal.city || '未设置',
            score: personal.score || '未设置',
            showPickerqu:false,
            columns2: [
                { text: '艾欧尼亚', value: '艾欧尼亚' },
                { text: '皮尔特沃夫', value: '皮尔特沃夫' },
                { text: '祖安', value: '祖安' },
                { text: '诺克萨斯', value: '诺克萨斯' },
                { text: '班德尔城', value: '班德尔城' },
                { text: '战争学院', value: '战争学院' },
                { text: '巨神峰', value: '巨神峰' },
                { text: '守望之海', value: '守望之海' },
            ],
            qu:'',
        }
    },
    methods: {
        onGetDate( {selectedValues} ) {
            this.show = false

            // console.log(selectedValues);
            this.birthday = `${selectedValues[0]}/${selectedValues[1]}/${selectedValues[2]}`; // 出生日期
            this.show = false; // 关闭弹窗
        },
        onGetCity({ selectedOptions }) {
            this.showPicker = false
            this.city = selectedOptions[0].text
        },
        onGetQu({ selectedOptions }) {
            this.showPickerqu = false
            this.qu = selectedOptions[0].text
        },
        async onSubmit() {
            const personal = this.$store.state.personal;
            const params = {
                id: personal.id,
                name: this.name,
                head: this.headUrl[0]?.url, //(this.headUrl[0]||{}).url
                birthday: this.birthday,
                gender: this.gender,
                hobby: this.hobby,
                city: this.city,
                qu:this.qu,
                score: this.score,
            }
  
            // console.log(params);
            const res = await axios.post('http://localhost:6001/modify/member', params); // 修改个人信息
            const data = res.data;
            // console.log(data);
            if (!data.success) {
                return showDialog({ message: data.message });
            }
            // 如果修改成功，应该去修改全局状态中的personal
            // modify接口的返回值data.result就是新的值
            this.$store.commit('setPersonal', data.result);
            this.$router.back();
        },
        async afterRead(file) {

            // 上传文件
            const formData = new FormData();
            formData.append('file', file.file); // 上传的文件
            const res = await axios.post('http://localhost:6001/upload', formData);
            const data = res.data;
            // 这时得到一个url，就是上传的头像的url
            // 因为返回的图片没有给服务器地址，所以强制添加一个服务器地址
            this.headUrl = [{ url: 'http://localhost:6001' + data.result.url }];
        }
    },
    computed: {
        formatDate() {

        }
    }
}
</script>
  
<style scoped>
.navBar {
    margin-bottom: 20px;
}
</style>